<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>销量排行榜
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
      <div class="container" :style="isPc ?'padding:30px': 'padding:10px'">


      <el-row :gutter="0">
            <el-col :md="6" :xs="24" style="margin:3px 0">
              <el-date-picker
                  v-model="query.begin_date"
                  type="date"
                  placeholder="开始日期"
                  class="date-input"
              >
              </el-date-picker>
              <el-date-picker
                  v-model="query.end_date"
                  type="date"
                  placeholder="结束日期"
                  class="date-input"
              >
              </el-date-picker>
            </el-col>
            <el-col :md="8" :xs="24" style="margin:3px 0">
              <el-select  v-model="query.cat_id" clearable filterable  placeholder="分类"  class="handle-select mr10">
                <el-option v-for = "c in catArr" :key="c.Id" :label="c.Name" :value="c.Id" ></el-option>
              </el-select>
              <el-select   v-model="query.brand_id" clearable placeholder="品牌" class="handle-select mr10">
                <el-option v-for = "b in brandArr" :key="b.Id" :label="b.Name" :value="b.Id" ></el-option>
              </el-select>
            </el-col>

            <el-col :md="8" :xs="24" style="margin:3px 0">
              <el-autocomplete
                  v-model="query.name"
                  :debounce=0
                  :fetch-suggestions="queryName"
                  @select="confirmName"
                  style="width: 65%"
                  :clearable="true"
                  class="add-dialog-input"
              ></el-autocomplete>

              <el-button style="width: 28%;" type="primary" icon="el-icon-search" @click="getData">搜索</el-button>
            </el-col>
          </el-row>


            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="name"  label="名称"></el-table-column>
                <el-table-column prop="uniq_attr"  label="规格"></el-table-column>
                <el-table-column prop="quantity" label="销量"  align="center"></el-table-column>
            </el-table>

        </div>
    </div>
</template>
<script>

export default {
    name: 'goods',
    data() {
        return {
            query: {
                begin_date: '',
                end_date: '',
                cat_id: '',
                brand_id: '',
                name: '',
            },
            isPc: false,
            pickerOptions: {
                shortcuts: [{
                    text: '最近7天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                },{
                    text: '最近30天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                },{
                    text: '最近90天',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            tableData: [],
            catArr: [],
            brandArr: [],
        };
    },
    created() {
        if (document.body.clientWidth > 768) {
          this.isPc = true
        }
        this.getData();
        this.http.getCats().then(res => {
            this.catArr = res.data ? res.data : [];
        });
        this.http.getBrands().then(res => {
            this.brandArr = res.data ? res.data : [];
        });
        this.query.begin_date = this.beforeDate(30)
        this.query.end_date = this.beforeDate(0)
    },
    activated(){
    },
    mounted(){
    },
    methods: {
        queryName(queryString, cb){
            this.http.getSpus({name: queryString}).then(res => {
                let ret = []
                const spus = res.data.list
                if (spus instanceof Array) {
                    for(let i=0; i< spus.length; i++){
                        ret[i] = {}
                        ret[i].value = spus[i].name;
                        ret[i].id = spus[i].id;
                    }
                }
                cb(ret);
            });
        },
        beforeDate(n){
            let d = new Date();
            let year = d.getFullYear();
            let mon=d.getMonth()+1;
            let day=d.getDate();
            if(day <= n){
                if(mon>1) {
                    mon=mon-1;
                }
                else {
                    year = year-1;
                    mon = 12;
                }
            }
            d.setDate(d.getDate()-n);
            year = d.getFullYear();
            mon=d.getMonth()+1;
            day=d.getDate();
            return year+"-"+(mon<10?('0'+mon):mon)+"-"+(day<10?('0'+day):day);
        },


        confirmName(item){
            this.query.name = item.value
        },
        // 获取 easy-mock 的模拟数据
        getData() {
            this.http.getSkuSales(this.query).then(res => {
                this.tableData = res.data;
            });
        },
    }
};
</script>

<style scoped>
.el-row {
    margin-bottom: 20px;
    background-color: #fff;
}
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 46%
}

.add-dialog-input {
    margin-right: 10px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.date-input{
    margin-right: 5px;
    width: 47%;
}
</style>
